/**
 * 全局公用Loading组件
 * @example
 * Loading.show('loadingText')
 * Loading.hide()
 */
import React, {Component} from 'react';
import {
  View,
  StyleSheet,
  ActivityIndicator,
  Dimensions,
  Text,
} from 'react-native';
import RootSiblings from 'react-native-root-siblings';
const width = Dimensions.get('window').width;
const height = Dimensions.get('window').height;

let sibling = undefined;
const Loading = {
  show: (text = 'loading...') => {
    sibling = new RootSiblings(
      (
        <View style={styles.maskStyle}>
          <View style={styles.backViewStyle}>
            <ActivityIndicator size="large" color="white" />
            <Text style={styles.textStyle}>{text}</Text>
          </View>
        </View>
      ),
    );
  },

  hide: () => {
    if (sibling instanceof RootSiblings) {
      sibling.destroy();
    }
  },
};

const styles = StyleSheet.create({
  maskStyle: {
    position: 'absolute',
    backgroundColor: 'rgba(0, 0, 0, 0.3)',
    width: width,
    height: height,
    alignItems: 'center',
    justifyContent: 'center',
  },
  backViewStyle: {
    backgroundColor: 'rgba(0, 0, 0, 0.8)',
    width: 140,
    height: 140,
    justifyContent: 'center',
    alignItems: 'center',
    borderRadius: 5,
  },
  textStyle: {
    fontSize: 16,
    color: '#fff',
    marginTop: 10,
  },
});

export default Loading;
